<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple-dark">
          <el-input v-model="search" circle placeholder="请输入phone"></el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-dark">
          <el-date-picker
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            v-model="date"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple-dark">
          <el-button
            type="primary"
            @click="submit"
            icon="el-icon-search"
            circle
          ></el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" > </el-table-column>
      <el-table-column label="序号" >
        <template slot-scope="scope">{{ scope.row.num }}</template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">{{ scope.row.sex }}</template>
      </el-table-column>
      <el-table-column label="就诊科室">
        <template slot-scope="scope">{{scope.row.className}}</template>
      </el-table-column>
      <el-table-column label="省" >
        <template slot-scope="scope">{{ scope.row.province }}</template>
      </el-table-column>
      <el-table-column label="市">
        <template slot-scope="scope">{{ scope.row.city }}</template>
      </el-table-column>
      <el-table-column label="诊断类型" >
        <template slot-scope="scope">{{ scope.row.zdtype }}</template>
      </el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
             <el-button type="primary" @click="seendetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column> -->
    </el-table>
    <div style="margin-top: 20px">
      <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])"
        >切换第二、第三行的选中状态</el-button
      > -->
      <el-button type="danger" @click="delmany">批量删除</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Binglilist",
  data() {
    return {
      kearr:[],
      search: "",
      date: "",
      tableData: [
       
        {
          num:"37",
          name:"小明",
          sex:"男",
          age:50,
          className:"外科",
          province:"河南",
          city:"郑州",
          zdtype:"骨折",
          date:"2020-12-8"
        },
        {
          num:"38",
          name:"小红",
          sex:"男",
          age:50,
          className:"外科",
          province:"河南",
          city:"郑州",
          zdtype:"骨折",
          date:"2020-12-8"
        },
        {
          num:"25",
          name:"小K",
          sex:"男",
          age:50,
          className:"外科",
          province:"河南",
          city:"郑州",
          zdtype:"骨折",
          date:"2020-12-8"
        }
      ],
      multipleSelection: [], //我把选中的每一个放入这个数组里面
    };
  },
  created(){
     this.$axios
        .get("/medicalrecord/list", {
          params: {
            pageNo:1,
            pageSize:10
          },
        })
        .then((response) => {
          console.log(response);

          // this.tableData=response.result
         
        })
        .catch((error) => {
          console.log(error);
        });
  },
  mounted() {
    //请求获取所有科室
    this.$axios.get("/departmentinfo/list")
    .then((res)=>{
      for (let i = 0; i < res.result.length; i++) {
        this.tableData[i].className=res.result[i].departmentname
        this.tableData[i].num=res.result[i].id
}
  // console.log(this.kearr)
    })
    .catch((error)=>{
console.log(error)
    })
  },
  methods: {
    submit() {
      console.log(this.search, this.date);
       this.$axios
            .post("/user/findByPhone",{phone:this.search})
            .then( (response) =>{ //
               console.log(response)
               
               
            })
            .catch( (error)=> {
              console.log(error);
            });
    },
    seendetail(rows){ //单机查看按钮
      console.log(rows)
      sessionStorage.setItem('row',JSON.stringify(rows))

      this.$router.push({path:'/index/binglliindex/bingliseenedit',query:{row:rows}})
    },
    delmany(){
      // console.log(this.multipleSelection)
    var arry= [];
     this.multipleSelection.filter((item)=>{
       arry.push(item.num)

      })
      console.log(arry)

      // var arry=[33,34]


        this.$axios
            .post("/medicalrecord/batchDelete",{ids:arry.join(",")})
            .then( (response) =>{ //
               console.log(response)
               
               
            })
            .catch( (error)=> {
              console.log(error);
            });

      // for(let i =0;i<this.tableData.length;i++){
      //     for (let j = 0; j < this.multipleSelection.length; j++) {
           
      //       if(this.tableData[i]==this.multipleSelection[j]){
      //             this.tableData.splice(i,1)

      //       }
      //     }

      // }
    },
//取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.is-circle{
  background: #16dcb8;
  border: none;
}
</style>